<template>
  <div>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }},{{ person.car.c2 }}</h2>
    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="updateC1">修改第一台车</button>
    <button @click="updateC2">修改第二台车</button>
    <button @click="updateCar">修改整个车</button>
  </div>
</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue';

  let person = reactive({
    name: '张三',
    age: 18,
    car: {
      c1: '奔驰',
      c2: '宝马'
    }
  });

  function updateName() {
    person.name += '~';
  }
  function updateAge() {
    person.age += 1;
  }
  function updateC1() {
    person.car.c1 = '奥迪';
  }
  function updateC2() {
    person.car.c2 = '大众';
  }
  function updateCar() {
    person.car = { c1: '雅迪', c2: '爱玛' };
  }

  // 若只想监视某一个属性，要将属性加工成 getter 函数
  // watch(person.name, (newValue, oldValue) => {
  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型时，需要写成函数式
  // watch(
  //   () =>
  //     return person.name;
  //   ,

  //   (newValue, oldValue) => {
  //     console.log('person发送变化', newValue, oldValue);
  //   }
  // );

  // 监视对象
  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型时，推荐使用函数式
  watch(
    () => person.car,
    (newValue, oldValue) => {
      console.log('person.car发送变化', newValue, oldValue);
    },
    { deep: true }
  );
</script>

<style scoped></style>
